<template>
  <el-dialog title="网关详情" :model-value="visible" width="900px" append-to-body @close="handleClose">
    <el-descriptions :column="3" border>
      <el-descriptions-item label="网关ID">{{ detailData.gatewayId }}</el-descriptions-item>
      <el-descriptions-item label="网关名称">{{ detailData.gatewayName }}</el-descriptions-item>
      <el-descriptions-item label="网关类型">
        <el-tag :type="getGatewayTypeTagType(detailData.gatewayType)">{{ getGatewayTypeText(detailData.gatewayType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="IP地址">{{ detailData.ipAddress }}</el-descriptions-item>
      <el-descriptions-item label="端口">{{ detailData.port }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusTagType(detailData.status)">{{ getStatusText(detailData.status) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="所属区域">{{ detailData.region }}</el-descriptions-item>
      <el-descriptions-item label="连接设备数">{{ detailData.deviceCount }}</el-descriptions-item>
      <el-descriptions-item label="固件版本">{{ detailData.firmwareVersion }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
      <el-descriptions-item label="最后上线">{{ detailData.lastOnlineTime }}</el-descriptions-item>
      <el-descriptions-item label="运行时长">{{ detailData.uptime }}</el-descriptions-item>
      <el-descriptions-item label="网关描述" :span="3">{{ detailData.description }}</el-descriptions-item>
    </el-descriptions>
    
    <el-divider>系统信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="never">
          <div class="system-info">
            <div class="info-title">CPU使用率</div>
            <el-progress type="circle" :percentage="detailData.cpuUsage" :color="getProgressColor(detailData.cpuUsage)" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <div class="system-info">
            <div class="info-title">内存使用率</div>
            <el-progress type="circle" :percentage="detailData.memoryUsage" :color="getProgressColor(detailData.memoryUsage)" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <div class="system-info">
            <div class="info-title">磁盘使用率</div>
            <el-progress type="circle" :percentage="detailData.diskUsage" :color="getProgressColor(detailData.diskUsage)" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

// Props
interface Props {
  visible: boolean
  data?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  data: () => ({})
})

// Emits
const emit = defineEmits(['update:visible'])

// 详情数据
const detailData = reactive({})

// 监听数据变化
watch(() => props.data, (newData) => {
  if (newData) {
    Object.assign(detailData, newData)
  }
}, { deep: true, immediate: true })

// 获取网关类型标签类型
const getGatewayTypeTagType = (type: string) => {
  const typeMap = {
    edge: 'primary',
    protocol: 'success',
    cloud: 'warning'
  }
  return typeMap[type] || 'info'
}

// 获取网关类型文本
const getGatewayTypeText = (type: string) => {
  const typeMap = {
    edge: '边缘网关',
    protocol: '协议网关',
    cloud: '云端网关'
  }
  return typeMap[type] || type
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const statusMap = {
    online: 'success',
    offline: 'info',
    error: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap = {
    online: '在线',
    offline: '离线',
    error: '故障'
  }
  return statusMap[status] || status
}

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 50) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.system-info {
  text-align: center;
  padding: 20px;
}

.info-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #303133;
}
</style>